<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">{{boo.type == 1 ? '机构入驻审核' : '机构入驻查看'}}</span>
    </div>
    <div class="jx-detail"  v-if="boo.type == 1" v-loading="boo.loading">
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            基本信息
          </div>
          <div class="list">
            <span>注册时间：</span>
            <div class="right">
              <span>{{enterDetail.registerAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>机构名称：</span>
            <div class="right">
              <span>{{enterDetail.institutionName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>机构类型：</span>
            <div class="right">
              <span>{{enterDetail.institutionCatalog || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>所在地区：</span>
            <div class="right">
              <span>{{enterDetail.institutionProvinceCity || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>公司地址：</span>
            <div class="right">
              <span>{{enterDetail.institutionAddress || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>登录账号：</span>
            <div class="right">
              <span>{{enterDetail.institutionLoginname || '--'}}</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">实体店信息</div>
          <div class="list">
            <span>企业logo：</span>
            <div class="right">
              <img class="logo" :src="enterDetail.institutionLogoImgUrl"/>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            实名认证信息
          </div>
          <div class="list">
            <span>姓名：</span>
            <div class="right">
              <span>{{enterDetail.managerRealname || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>身份证号码：</span>
            <div class="right">
              <span>{{enterDetail.managerIdCard || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>身份证图片：</span>
            <div class="right">
              <img class="pic" :src="enterDetail.managerIdCardFrontImgUrl"/> 
              <img class="pic" :src="enterDetail.managerIdCardBackImgUrl"/> 
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">企业资质证明</div>
          <div class="list">
            <span>企业名称：</span>
            <div class="right">
              <span>{{enterDetail.institutionLicenseName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>营业执照编号：</span>
            <div class="right">
              <span>{{enterDetail.institutionLicense || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>营业执照图片：</span>
            <div class="right">
              <img class="pic" :src="enterDetail.institutionLicenseFrontImgUrl"/> 
              <img class="pic" :src="enterDetail.institutionLicenseBackImgUrl"/> 
            </div>
          </div>
          <div class="list">
            <span>企业资质证件：</span>
            <div class="right">
              <img class="pic" v-for="(item,index) in enterDetail.institutionLicenseOtherImgUrls" :src="item"/> 
            </div>
          </div>
        </div>
      </div>
      <div class="check" v-if="!boo.detail">
        <div class="check-tab check-detail">
          <div class="item">
            <span>结算方式：</span>
            <div class="right">
              <el-select class="tel-value" v-model="params_list.settlement" placeholder="请选择">
                <el-option v-for="(item,index) in statuslist" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="check-detail">
          <div class="item">
            <span>申请理由：</span>
            <div class="right">
              <div v-for="(item,index) in enterDetail.applyReasons" :key="index">
                <span class="gray">{{item.date || '--'}}</span>
                <span>{{item.string || '--'}}</span>
              </div>
            </div>
          </div>
          <div class="item">
            <span>审核意见：</span>
            <div class="right">
              <div v-for="(item,index) in enterDetail.approveOpinions" :key="index">
                <span class="gray">{{item.date || '--'}}</span>
                <span class="green">{{item.name || '--'}}</span>
                <span>{{item.string || '--'}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="check-tab check-detail">
          <div class="item">
            <span>审核意见：</span>
            <div class="right">
              <el-input type="textarea" v-model="params_list.check" placeholder="请输入审核意见" :rows="4"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-container" v-if="!boo.detail">
        <el-button class="jx-btn" type="warning" :loading="boo.saveing" @click="submitRow('-1')">审核不通过</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('1')">审核通过</el-button>
      </div>
    </div>
    <div class="jx-detail" v-if="boo.type == 2">
      <div class="detail-item">
        <div class="item">
          <div class="title">基本信息</div>
          <div class="list">
            <span>所在地区：</span>
            <div class="right">
              <span>{{detail.institutionProvinceCity || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>定位地址：</span>
            <div class="right">
              <span class="blue">
                <img class="icon" src="/static/img/u178.png"/>
                {{detail.institutionLocation || '--'}}
              </span>
            </div>
          </div>
          <div class="list">
            <span>登录账号：</span>
            <div class="right">
              <span>{{detail.institutionLoginname || '--'}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">附近未注册店铺</div>
          <div class="jx-table">
            <el-table :data="detail.unRegisterShops" border style="width: 100%" v-loading="boo.loading2">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="shopName" label="店铺名称" width="120" align="center">
              </el-table-column>
              <el-table-column prop="shopApplyLocation" label="定位地址" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <img class="icon" src="/static/img/u178.png"/>
                  <span class="blue">{{scope.row.shopApplyLocation}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="shopDistance" label="定位距离" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{scope.row.shopDistance}}&nbsp;km</span>
                </template>
              </el-table-column>
              <el-table-column prop="shopPhone" label="联系电话" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="操作" width="250" align="center">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.shopConfirmStatus == '未确认'" @click="hiddenRow(scope.row)" type="text" size="small">确认</el-button>
                  <span v-else>已确认</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          list: this.$api.merchant.sfenter,
          common: this.$api.common.dict
        },
        boo: {
          saveing: false,
          loading: false,
          loading2: false,
          type: this.$route.query.type,
          detail: this.$route.query.detail,
        },
        params_list: {
          check: '',
          settlement: '',
        },
        enterDetail: '',
        detail: '',
        statuslist: '',
			}
		},
		mounted(){
      let _self = this
      _self.getDict()
      if(this.$route.query.type == 1){
        _self.getDetail()
      }else if(this.$route.query.type == 2) {
        _self.getView()
      }
    },
		methods: {
      back(){
        history.go(-1)
      },
      getDict(){
        let _self = this
        let params = {
          dictCode: 'institutionBalanceCatalog',
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.statuslist = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.common, params, success) 
      },
      getDetail(){
        let _self = this
        let params = {
          id: this.$route.query.id,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.enterDetail = res.retObject
            _self.params_list.settlement = res.retObject.institutionBalanceCatalog
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(`${_self.https.list.detail}${params.id}`, {}, success) 
      },
      getView(){
        let _self = this
        let params = {
          id: this.$route.query.id,
        }
        _self.boo.loading2 = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.detail = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading2 = false
        }
        _self.$axios.get(`${_self.https.list.view}${params.id}`, {}, success) 
      },
      submitRow(type){
        let _self = this
        if(_self.params_list.settlement == '') return _self.$message.error('请选择结算方式')
        if(_self.params_list.check == '') return _self.$message.error('请输入审核意见')
        let params = {
          institutionBalanceCatalog: _self.params_list.settlement,
          msgCode: type,
          msg: _self.params_list.check
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            if(type == 1){
              _self.$message.success('审核通过')
            }else {
              _self.$message.success('审核不通过')
            }
            setTimeout(()=>{
              _self.$router.push('/merchant/sfenter')
            }, 1000)
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.put(`${_self.https.list.edit}${_self.$route.query.id}`, params, success) 
      }
    }
	}

</script>
<style scoped lang="sass">
  .check 
    .check-detail
      .item 
        margin-bottom: 15px;
        span 
          display: inline-block
          width: 70px
        .right 
          display: inline-block
          margin-left: 20px
          width: 87%
          span 
            width: auto
            margin: 0 5px
          /deep/ .el-textarea
            vertical-align: top
  .btn-container
    margin-top: 55px
    .jx-btn.el-button 
      padding: 0 30px
      height: 36px
      line-height: 36px
      font-size: 14px
  .jx-table
    .el-table .cell
      img 
        width: 17px
        height: 18px
        position: relative
        top: 2px
</style>
